<template>
	<view class="pageview">
		<cl-navbar :title="$t('my_file.setting.info.title')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view>
			<view class="cellviewGrop" @click="editInfo('avatar_url','image',$t('chat.groupChatDetails.avatar_url'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('chat.groupChatDetails.avatar_url')}}</text>
					</view>
					<view class="cellview__right">
						<cl-avatar :src="groupInfo.avatar_url" size="100rpx"></cl-avatar>
						<u-icon name="arrow-right" color="#B2B2B2"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editInfo('group_name','input',$t('chat.groupChatDetails.group_name'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('chat.groupChatDetails.group_name')}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content">{{groupInfo.group_name}}</text>
						<u-icon name="arrow-right" color="#B2B2B2"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="editInfo('description','textarea',$t('chat.groupChatDetails.description'))">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t('chat.groupChatDetails.description')}}</text>
					</view>
					<view class="cellview__right">
						<u-icon name="arrow-right" color="#B2B2B2"></u-icon>
					</view>
				</view>
				<view class="cellDetails">
					{{groupInfo.description || '--'}}
				</view>
			</view>
		</view>
		<view>
			<cl-edit-pop ref="clEditPop" :title="editInfoData.title" @complete="popComplete" @cancel="popCancel">
				<view style="padding:30rpx;" >
					<u-input
						v-if="editInfoData.type=='input'"
						:customStyle="{backgroundColor:'#ffffff',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
						fontSize="28rpx"
						focus
						:adjustPosition="false"
					    border="none"
						v-model="editInfoData.data[editInfoData.model]"
					  ></u-input>
					 <u-textarea autoHeight	 v-model="editInfoData.data[editInfoData.model]" border="none" :customStyle="{backgroundColor:'#ffffff'}" focus :adjustPosition="false" v-if="editInfoData.type=='textarea'"></u-textarea>
				</view>
			</cl-edit-pop>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import upload from '@/common/upload/upload.js'
	import groupApi from '@/services/api/group.js'
	export default {
		name: 'group_info_edit',
		data() {
			return {
				editInfoData:{
					type:'',
					title:'',
					model:'',
					data:{}
				},
			}
		},
		computed: {
			...mapState({
				groupInfo: state => state.chat.chatGroupInfo,
			})
		},
		onLoad() {
			
		},
		methods: {
			editInfo(type,inputType,title){
				let infodata = JSON.parse(JSON.stringify(this.groupInfo))
				let { avatar_url,group_name,description,notice,group_id } = infodata
				this.editInfoData = {
					type:inputType,
					title:title,
					model:type,
					data:{ avatar_url,group_name,description,notice,group_id }
				}
				if(type=='avatar_url'){
					uni.chooseImage({
						count:1,
						sourceType:['album'],
						crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
							width: 500,
							height: 500
						},
						success: async(res) => {
						   let loadSrc = res.tempFilePaths[0];
						   try {
								let res = await upload.uploadFile(loadSrc, 'avatar', 'image')
								this.editInfoData.data.avatar_url = res.url
								this.apiUpdate()
						   } catch (e) {
						   }
						}
					})
				}else{
					this.$nextTick(()=>{
						this.$refs.clEditPop.show()
					})
				}
			},
			//编辑确认
			popComplete(){
				this.apiUpdate()
			},
			//编辑取消
			popCancel(){
				this.editInfoData = {
					type:'',
					title:'',
					model:'',
					data:{}
				}
			},
			async apiUpdate(){
				let isRenewal = false
				if(this.groupInfo.avatar_url != this.editInfoData.data.avatar_url || this.groupInfo.group_name != this.editInfoData.data.group_name){
					isRenewal = true
				}
				let resapi = await groupApi.editGroupInfo(this.editInfoData.data,isRenewal)
				if(resapi){
					// this.groupInfo = Object.assign({}, this.groupInfo, this.editInfoData.data);
					this.$refs.clEditPop.cancel()
					uni.showToast({
						title:resapi.msg,
						icon:'none'
					})
				}
				
			},
			confirm(e){
				console.log(e);
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding: 30rpx;
		min-height: 110rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.cellview {
			display: flex;
			justify-content: space-between;
	
			&__left {
				display: flex;
				align-items: center;
				&__title {
					font-size: 28rpx;
				}
			}
			&__right{
				display: flex;
				align-items: center;
				&__content{
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
		.cellDetails{
			font-size: 28rpx;
			color: #61626e;
			margin-top: 20rpx;
		}
	}
</style>